<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p:dialog xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" widgetVar="historyDialog" header="History" modal="true" width="800"
	resizable="false">
	<h:form id="historyForm" prependId="false">
		<p:messages />
		<h:inputHidden id="isPeriodSelected" value="#{taskModel.isPeriodSelected}" />
		<h:panelGroup layout="block">
			<h:panelGrid id="newTaskGrid" columns="1">
				<p:accordionPanel>
					<p:tab title="#{resourceBundle['task.accordion.generalTitle']}">
						<h:panelGroup layout="block" styleClass="detailContent">
							<h:panelGroup layout="block">
								<h:panelGrid columns="3" width="100%" columnClasses="firstColumn, secondColumn">

									<p:outputLabel value="#{resourceBundle['task.name']}" for="name" />
									<p:inputText id="name" value="#{taskModel.name}" label="Name" required="true">
										<f:validateLength minimum="2" maximum="150" />
									</p:inputText>
									<p:message for="name" display="icon" />

									<p:outputLabel value="#{resourceBundle['task.description']}" for="description" />
									<p:inputTextarea id="description" value="#{taskModel.description}" required="true">
										<f:validateLength minimum="2" maximum="500" />
									</p:inputTextarea>
									<p:message for="description" display="icon" />

									<p:outputLabel value="#{resourceBundle['task.assignatedUser']}" for="userAsignee" />
									<p:selectOneMenu id="userAsignee" value="#{taskModel.userAssignee}" required="true">
										<f:selectItem itemLabel="Select User to Assign" noSelectionOption="true" />
										<f:selectItems value="#{taskModel.userList}" var="user" itemLabel="#{user.firstName} #{user.lastName}" />
									</p:selectOneMenu>
									<p:message for="userAsignee" display="icon" />

									<p:outputLabel value="#{resourceBundle['task.priority']}" for="priority" />
									<p:selectOneMenu id="priority" value="#{taskModel.priority}" required="true" widgetVar="prorityWii">
										<f:selectItem itemLabel="Select Priority" noSelectionOption="true" />
										<f:selectItems value="#{taskModel.priorityList}" var="priority" itemLabel="#{priority.name}" />
									</p:selectOneMenu>
									<p:message for="priority" display="icon" />



								</h:panelGrid>
							</h:panelGroup>

						</h:panelGroup>
					</p:tab>
					<p:tab title="#{resourceBundle['task.accordion.periodicityTitle']}">
						<h:panelGroup layout="block" styleClass="detailContent">
							<h:panelGroup layout="block">
								<h:panelGrid columns="3" width="60%" columnClasses="firstColumn,secondColumn">
									<h:outputText value="#{resourceBundle['task.recurrentTask']}" />
									<span class="toggle-bg"> <input type="radio" name="toggle" value="off" /> <input type="radio" name="toggle" value="on" /> <span class="switch"></span>
									</span>
									<h:outputText />

									<h:outputLabel value="#{resourceBundle['task.dueDate']}" for="popupButtonCal" id="popupButtonCalLabel" styleClass="popupCalendar" />
									<p:calendar value="#{taskModel.dueTime}" id="popupButtonCal" showOn="button" mindate="today" styleClass="popupCalendar" readonlyInput="true" />
									<p:message for="popupButtonCal" display="icon" />
								</h:panelGrid>
								<h:outputLabel value="#{resourceBundle['task.customScheduleDaysBefore']}" for="customScheduleDaysBefore" styleClass="recurrent" />
								<p:spinner id="customScheduleDaysBefore" min="0" max="31" value="#{taskModel.customScheduleDaysBefore}" />
								<p:message for="customScheduleDaysBefore" display="icon" />

								<span></span>
								<h:outputLabel value="#{resourceBundle['task.customScheduleDaysAfterMax']}" for="customScheduleDaysAfterMax" styleClass="recurrent" />
								<p:spinner id="customScheduleDaysAfterMax" min="0" max="31" value="#{taskModel.customScheduleDaysAfterMax}" />
								<p:message for="customScheduleDaysAfterMax" display="icon" />
							</h:panelGroup>
						</h:panelGroup>

						<p:outputPanel id="recurrentTaskPanel" styleClass="recurrentPanel" style="display:none;">

							<p:selectOneRadio id="customRadio" layout="custom" value="#{taskModel.selectionModel.selectionPeriodicity}">
								<f:selectItem itemValue="#{resourceBundle['task.periodicity.daily']}" />
								<f:selectItem itemValue="#{resourceBundle['task.periodicity.weekly']}" />
								<f:selectItem itemValue="#{resourceBundle['task.periodicity.monthly']}" />
								<f:selectItem itemValue="#{resourceBundle['task.periodicity.yearly']}" />
							</p:selectOneRadio>

							<h:panelGrid columns="4" columnClasses="firstColumn,secondColumn,thirdColumn">
								<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
								<h:outputLabel for="opt1" value="Daily" />
								<p:calendar value="#{taskModel.selectionModel.dailyPeriodicity}" id="dailyPeriodicity" showOn="button" mindate="tomorrow" readonlyInput="true" />
								<p:message for="dailyPeriodicity" display="icon" />

								<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
								<h:outputLabel for="opt2" value="Weekly" />
								<p:selectOneButton id="weeklyValue" value="#{taskModel.selectionModel.weeklyPeriodicity}">
									<f:selectItems itemLabel="#{day.dayName}" itemValue="#{day.order}" value="#{taskModel.weekDays}" var="day" />
								</p:selectOneButton>
								<p:message for="weeklyValue" display="icon" />

								<p:radioButton id="opt3" for="customRadio" itemIndex="2" />
								<h:outputLabel for="opt3" value="Monthly" />
								<p:spinner min="1" max="31" id="monthlyValue" value="#{taskModel.selectionModel.monthlyPeriodicity}" />
								<p:message for="monthlyValue" display="icon" />

								<p:radioButton id="opt4" for="customRadio" itemIndex="3" />
								<h:outputLabel for="opt4" value="Yearly" />
								<h:panelGroup>
									<p:spinner min="1" max="12" id="yearlyMonthValue" value="#{taskModel.selectionModel.yearlyMonthValue}">
										<p:ajax event="change" listener="#{taskController.updateYearlyDayValues}" update="yearlyDayValue" />
									</p:spinner>
									<p:spinner min="1" max="#{taskModel.selectionModel.maxYearlyDayValue}" id="yearlyDayValue" value="#{taskModel.selectionModel.yearlyDayValue}" />
									<p:message for="yearlyDayValue" display="icon" />
								</h:panelGroup>
							</h:panelGrid>
						</p:outputPanel>
					</p:tab>
					<p:tab title="#{resourceBundle['task.accordion.commentsTitle']}">
						<h:panelGroup layout="block" styleClass="detailContent">
							<h:panelGrid columns="3" width="100%" columnClasses="firstColumn, secondColumn">
								<p:outputLabel value="#{resourceBundle['task.accordion.commentsTitle']}:" for="comments" />
								<p:inputTextarea id="comments" value="#{taskModel.newComment}" required="true" styleClass="taskComments">
									<f:validateLength minimum="2" maximum="500" />
								</p:inputTextarea>
								<p:message for="comments" display="icon" />
							</h:panelGrid>
						</h:panelGroup>
						<br />
						<div class="commentsBox">
							<c:forEach var="item" items="#{taskModel.commentList}">
								<h:panelGroup layout="block">
									<span class="commentContainer"> <span class="commentAutor"><h:outputText value="#{item.user.firstName} #{item.user.lastName} said on #{item.formattedDate}: " /> <h:graphicImage
												value="/resources/images/comment.png" /></span><br /> <span class="commentContent"><h:outputText value="#{item.description}" /></span>
									</span>
								</h:panelGroup>
							</c:forEach>
						</div>
						<ui:fragment rendered="#{fn:length(taskModel.commentList) == 0 }">
							<h:outputText value="No comments yet." />
						</ui:fragment>
					</p:tab>
				</p:accordionPanel>
				<h:panelGroup layout="block" styleClass="detailActions">
					<p:commandButton value="Cancel" inmediate="true" styleClass="btn" onclick="taskDialog.hide()" update="@none" process="@none" />
					<p:commandButton value="Save" update=":mainForm#{taskModel.dataTableToUpdate}" action="confirmTask" styleClass="btn savebtn" oncomplete="handleServerResponse(xhr, status, args)" />
				</h:panelGroup>

			</h:panelGrid>
		</h:panelGroup>
	</h:form>
	<script type="text/javascript">
        function handleServerResponse(xhr, status, args) {
            if (!args.validationFailed) {
                taskDialog.hide();
            }
        }
    </script>
</p:dialog>